<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="car-content">
			<div class="car-content-center">
				<div class="car-bind">
					<dl>
						<input type="text" placeholder="请输入管理员微信号"  class="input" />
						<span id="search"><i class="fa fa-search"></i>搜索</span>
					</dl>
					<span>您最多可以绑定1个管理员</span>
				</div>
				<div class="car-bind-seachs">
					<div class="car-bind-fail">
						<dl>您搜索的微信号码不存在</dl>
					</div>
					<div class="car-bind-seach">
						<div class="car-img">
							<img src="http://wx.qlogo.cn/mmhead/tqRiaNianNl1k5SwQDrIOicAoHoMSRejp44SZnSo4rDSWzs1YTI65vNvg/64"/></dl>
							<div class="car-img-bg"><i class="fa fa-trash-o"></i></div>
						</div>
						<dl class="phone" style="display: none;">18953989303</dl>
						<dl class="name">黄金清纯小王子</dl>
					</div>
					<div class="car-bind-add">
						<button class="deer-btn car-add">添加</button>
					</div>
					<div class="car-bind-succed">
						已绑定
					</div>
				</div>
				
				<ul class="car-bind-list">
					
				</ul>
				<div class="car-keep">
					<button id="btn" class="deer-btn">保存</button>
				</div>
			</div>
		</div>
		<!--/deer-content-->
	</section>
	
	<!--js-->
	<aside>
		
		<script type="text/javascript" src="../layui/layui.js" ></script>
		<script type="text/javascript">
			
			layui.use(['jquery','layer'],function(){
				var $=layui.jquery;
				var layer=layui.layer;
				
				//高度自适
				var index = parent.layer.getFrameIndex(window.name)
				parent.layer.iframeAuto(index)
				
				
				//点击搜索
				$('#search').bind('click',function(){
					if($('.input').val()==''){
						layer.tips('您尚未填写微信号','.input',{tips:1})
						return false
					}
//					layer.msg('你点击了搜索',{icon:1})

					//失败
					if($('.input').val()!=='123'){
						$('.car-bind-seachs').css('visibility','visible')
						$('.car-bind-fail').show()
						$('.car-bind-seach').css('visibility','hidden')
						$('.car-bind-add').css('visibility','hidden')
						
					}else{
						//成功
						$('.car-bind-fail').hide()
						$('.car-bind-seachs').css('visibility','visible')
						$('.car-bind-seach').css('visibility','visible')
						$('.car-bind-add').css('visibility','visible')
					}
				})
				
				
				$('.car-img').bind('click',function(){
					$('.car-bind-seachs').css('visibility','hidden')
					$('.car-bind-seach').css('visibility','hidden')
					$('.car-bind-add').css('visibility','hidden')
				})
				
				
				
				//添加
				$('.car-add').bind('click',function(){
					$('.phone').text()
					$('.car-bind-list').append('<li><i class="fa fa-trash-o car-delete"></i>'+$('.phone').text()+'<span>'+$('.name').text()+'<span></li>')
					
					
					$('.car-bind-seach').css('visibility','hidden')
					$('.car-bind-add').css('visibility','hidden')
					$('.car-bind-succed').css('visibility','visible')
					
				})
				
				//删除
				$('body').on('click','.car-delete',function(){
					$('.car-bind-seach').css('visibility','hidden')
					$('.car-bind-add').css('visibility','hidden')
					$('.car-bind-succed').css('visibility','hidden')
					$('.car-bind-list>li').remove()
					console.log('123')
					
					
				})
				//回车搜索
				$(document).bind('keypress',function(event){
					if(event.keyCode == "13"){
						$('#search').trigger('click')
					}
				})
//				保存
				$('#btn').bind('click',function(){
						$('.section-right').empty()
						layer.msg('保存成功', {icon: 1},function(){
							parent.layer.close(index)
						})
				})
				

			})
			
		</script>
		
		
		
	</aside>
	<!--/js-->
</body>
</html>